<template>
  <starGenView :title="lang.title">
    <cfg-table v-if="!!this.collectionObject"
    ref="table"
    :columns="columns"
    :expandColumns="expandColumns"
    :data="collectionObject.records"
    :loading="loading"
    :config="tableConfig"
    :pageSizeOpts="pageSizeOpts"
    :pageNavigation="pageNavigation"
    :queryFormItem="queryFormItem"
    :collapseFormItem="collapseFormItem"
    :additionalAction="additionalAction"
    :actionButtons="actionButtonsCalc"
    @loadPage="loadPage"
    @actionEditJson="actionEditJson"
    @handleDbClick="(row, index) => $emit('handleDbClick', row, index)"
    @handleSelect="(selection, row) => $emit('handleSelect', selection, row)"
    @handleSelectCancel="(selection, row) => $emit('handleSelectCancel', selection, row)"
    @handleCreate="handleCreate"
    @handleDetail="handleDetail"
    @handleEdit="handleEdit"
    @handleDelete="handleDelete"
    @handleDeleteMultiple="handleDeleteMultiple"
    @handleSearch="handleSearch"
    @handleReset="handleReset"
    @dataChange="data => $emit('dataChange', data)"
    />
    <cfgCrudAddModal
        v-show="modelDrawer.status==='new'"
        v-bind="modalConfig"
        :classObject="classObject"
        :collectionObject="collectionObject"
        :drawer="modelDrawer"
        :fields="modalFormItem"
        @submit="handleNewAddSubmit"
    />
    <eventModal
        v-show="modelDrawer.status!=='new'"
        v-bind="modalConfig"
        :classObject="classObject"
        :drawer="modelDrawer"
        :title="modalTitle"
        @submit="handleEditSubmit"
    />
    <Modal
        v-model="jsonDrawer.show"
        :closable="false"
        :mask-closable="false"
        :width="90"
        footer-hide
        class-name="eventManage-editerJson"
        :styles="{top: '50px', maxWidth: '1200px'}"
    >
        <span slot="header">编辑JSON<span style="font-weight: 600;">{{this.modalTitle}}</span></span>
        <vue-json-editor
            ref="_jsonEditor"
            :style="{height: 'calc(100vh - 260px)'}"
            v-model="classObject.record.event"
            :showBtns="true"
            lang="zh"
            mode="code"
            @json-change="onJsonChange" 
            @json-save="saveJson"
            @has-error="onError"
        />
        <Alert class="json-mesage" type="error" v-show="jsonMessage">{{jsonMessage}}</Alert>
        <div class="ivu-modal-footer">
            <Button @click="jsonDrawer.show=false">取消</Button>
            <!-- <Button @click="saveJson" type="primary" class="ivu-ml">保存</Button> -->
        </div>
    </Modal>
  </starGenView>
</template>

<script>
import modelMixin from 'public/components/configComp/mixins/modelMixin';
import eventModal from '../../../eventManage/event/eventModal.vue'
import vueJsonEditor from 'vue-json-editor'

export default {
    mixins: [modelMixin],
    components: { eventModal,vueJsonEditor },
    data() {
        return {
            modelName: 'event',
            deleteById: true,
            pageNavigation: { total: 0, pageSize: 50, pageNumber: 1 },
            categoryList: [
                '标准事件', 'hier', '采购计划', '采购管理', '销售管理', '设备管理', '委外管理', '生产管理', '设备管理', 'MRP计划',
                '基础档案', '仓储管理', '临时测试', '业务定时', 'test', '分类',  '工作中心1', 
            ].map(item=> ({label: item, value: item})),
            tableConfig: {
                queryById: true,
                actionDetail: false,
                labelWidth: 68,
                actionOption: {
                    width: 150,
                },
                additionalAction: {  // 附加操作的配置，以及button列表
                    show: true,
                    width: 120,
                    buttons: [
                    {
                        title: { 'zh-CN': '编辑JSON', 'en-US': 'edit json' }, color: 'green',
                        eventName: 'actionEditJson'
                    }
                    ]
                }
            },
            modalConfig: {
                hasFeatures: false,
                labelWidth: 90,
            },
            jsonDrawer: {show: false },
            fullscreen: false,
            rowIndex: null,
            detailPicture: '',
            loading: false,
            jsonMessage: ''
        }
    },
    methods: {
        onJsonChange(a) {
            console.log('onJsonChange',a);
        },
        onJsonSave(a) {
            console.log('onJsonSave',a);
        },
        onError(a) {
            console.log('onError',a);
        },
        async actionEditJson(row,index) {
            let filter = this.tableConfig.queryById ? {id: row.id} : { type: row.type, className: row.className }
            
            this.loading = true;
            console.log("file: index.vue:81  actionEditJson", row, index)
            if (await this.getRecord(filter)) {
                this.jsonDrawer.show = true
                this.loading = false;
            }
        },
        async saveJson() {
            this.loading = true;
            let flag = await this.classObject.updateById()
            if (flag) {
                this.collectionObject.updateRecord(this.classObject.record)
                this.dataChange('edit')
                this.loading = false;
                this.jsonDrawer.show = false
            } else {
                this.loading = false;
            }
        }
    },
    computed: {
        // table的columns配置
        columns() {
            return [
                {
                    key: 'category',
                    title: { 'zh-CN': '分类', 'en-US': 'category' }[this.G_Locale],
                    align: 'center',
                    sortable: true,
                    show: true
                },
                {
                    key: 'name',
                    title: { 'zh-CN': '名称', 'en-US': 'name' }[this.G_Locale],
                    align: 'center',
                    sortable: true,
                    show: true
                },
            ]
        },
        // 新增、查看、编辑弹窗，表单展示的字段
        modalFormItem() {
            return [
                {
                    key: 'category',
                    title: this.$t(`model.category`),
                    config: { type: 'text', clearable: true, },
                    // editConfig: { disabled: true },
                    rules: [
                        { required: true, trigger: 'blur',
                            message: this.$t(`model.category`)+this.$t(`global.notEmpty`)
                        }
                    ]
                },
                {
                    key: 'name',
                    title: { 'zh-CN': '名称', 'en-US': 'name' }[this.G_Locale],
                    config: {
                        type: 'text',
                        maxlength: 50,
                        clearable: true,
                        placeholder: {
                            'zh-CN': '请输入名称',
                            'en-US': 'please input name'
                        }[this.G_Locale]
                    },
                    // editConfig: { disabled: true },
                    rules: [
                        { required: true, trigger: 'blur',
                            message: { 'zh-CN': '名称不能为空', 'en-US': 'The name cannot be empty' }[this.G_Locale]
                        }
                    ]
                },
                {
                    key: 'comments',
                    title: this.$t(`model.comments`),
                    config: {
                        type: 'textarea',
                        autosize: {minRows: 1, maxRows: 5},
                        clearable: true,
                    },
                },
            ]
        },
        // 顶部搜索表单，展示的字段
        queryFormItem() {
            return [
                {
                    key: 'name',
                    title: { 'zh-CN': '名称', 'en-US': 'name' }[this.G_Locale],
                    config: { type: 'text', clearable: true, },
                    labelWidth: 60,
                },
            ]
        },
        modalTitle() {
            let record = this.classObject.record

            return record ? `（${record.category}：${record.name}）` : ''
        },
        lang() {
            return {
                'zh-CN': {
                    title: '事件管理',
                  },
                  'en-US': {
                    title: 'event manage',
                }
            }[this.G_Locale]
        },
    },
    watch: {
        searchData(val) {
            console.log("file: eventList.vue:250  searchData  val:", val)
            this.loadPage({...this.pageNavigation, pageNumber: 1})
        }
    }
}
</script>

<style lang="less">
// /deep/ .cli-content-column {
//     height: 100%;
// }
.eventManage-editerJson {
    .jsoneditor-vue {
        height: 100%;
    }
    .ivu-modal-footer {
        margin-right: 60px;
    }
    .jsoneditor-btns {
        margin-top: 14px;
        text-align: right;
        button {
            width: 60px;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
    }
}
</style>
